import './TestItem.scss'
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';

function TestItem({Info}){
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const {user_status} = useSelector(state => state.user);

    function toExam(){
        dispatch(setUserStatus({
            ...user_status,
            partid:Info.test_name
        }))
        navigate('/studentexam');
    }

    function toCheck(){
        dispatch(setUserStatus({
            ...user_status,
            partid:Info.test_name
        }))
        navigate('/studentcheck');
    }
    

    return (
        <div className="TestItem">
            <h1>第{Info.test_name}章测试</h1>
            <h2>截止时间:{Info.test_ddl}</h2>
            <div className='test-scores'>
                <span className='total'>
                    总分：{Info.test_total_score}
                </span>
                <span className='got'>
                    {Info.if_test_finish?`得分：${Info.test_got_score}`:'暂未完成'}
                </span>
            </div>
            <div className='test-btns'>
                <button 
                    className='join' 
                    onClick={toExam}
                >
                    参加测验
                </button>
                <button 
                    className={Info.if_test_finish?'check':'check-disable'}
                    onClick={Info.if_test_finish?toCheck:()=>{}}
                >
                    查看错题集
                </button>
            </div>
        </div>
    )
}

export default TestItem;